
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件捕获与冒泡演示</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .container { display: flex; flex-direction: column; align-items: center; }
        #grandparent {
            width: 300px; height: 300px;
            background-color: #ff6b6b;
            display: flex; justify-content: center; align-items: center;
            border-radius: 8px; cursor: pointer;
        }
        #parent {
            width: 200px; height: 200px;
            background-color: #48dbfb;
            display: flex; justify-content: center; align-items: center;
            border-radius: 8px;
        }
        #child {
            width: 100px; height: 100px;
            background-color: #1dd1a1;
            border-radius: 8px;
            display: flex; justify-content: center; align-items: center;
            color: white; font-weight: bold;
        }
        .log-container {
            margin-top: 20px; width: 80%;
            border: 1px solid #ddd; padding: 10px;
            height: 150px; overflow-y: auto;
        }
        .controls { margin: 20px 0; }
        button { padding: 8px 16px; margin: 0 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h2>点击彩色方块观察事件流</h2>
        <div class="controls">
            <button id="captureBtn">开启捕获模式</button>
            <button id="bubbleBtn">开启冒泡模式</button>
            <button id="stopBtn">阻止冒泡</button>
            <button id="resetBtn">重置日志</button>
        </div>
        <div id="grandparent">
            Grandparent
            <div id="parent">
                Parent
                <div id="child">Child</div>
            </div>
        </div>
        <div class="log-container">
            <h4>事件触发日志：</h4>
            <div id="eventLog"></div>
        </div>
    </div>

    <script>
        const grandparent = document.getElementById('grandparent');
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');
        const eventLog = document.getElementById('eventLog');
        const captureBtn = document.getElementById('captureBtn');
        const bubbleBtn = document.getElementById('bubbleBtn');
        const stopBtn = document.getElementById('stopBtn');
        const resetBtn = document.getElementById('resetBtn');

        let useCapture = false;
        let stopPropagation = false;

        function logEvent(element, phase) {
            const entry = document.createElement('div');
            entry.textContent = `${new Date().toLocaleTimeString()} - ${phase}: ${element.id}`;
            eventLog.appendChild(entry);
            eventLog.scrollTop = eventLog.scrollHeight;
        }

        function setupEventListeners() {
            // 移除旧的事件监听器
            grandparent.removeEventListener('click', handleGrandparentClick, true);
            parent.removeEventListener('click', handleParentClick, true);
            child.removeEventListener('click', handleChildClick, true);
            grandparent.removeEventListener('click', handleGrandparentClick, false);
            parent.removeEventListener('click', handleParentClick, false);
            child.removeEventListener('click', handleChildClick, false);

            // 添加新的事件监听器
            grandparent.addEventListener('click', handleGrandparentClick, useCapture);
            parent.addEventListener('click', handleParentClick, useCapture);
            child.addEventListener('click', handleChildClick, useCapture);
        }

        function handleGrandparentClick(e) {
            logEvent(grandparent, useCapture ? 'CAPTURE' : 'BUBBLE');
            if (stopPropagation) e.stopPropagation();
        }

        function handleParentClick(e) {
            logEvent(parent, useCapture ? 'CAPTURE' : 'BUBBLE');
            if (stopPropagation) e.stopPropagation();
        }

        function handleChildClick(e) {
            logEvent(child, 'TARGET');
            if (stopPropagation) e.stopPropagation();
        }

        captureBtn.addEventListener('click', () => {
            useCapture = true;
            stopPropagation = false;
            setupEventListeners();
            eventLog.innerHTML = '<h4>事件触发日志：</h4>';
            logEvent({id: '系统消息'}, `切换到捕获模式`);
        });

        bubbleBtn.addEventListener('click', () => {
            useCapture = false;
            stopPropagation = false;
            setupEventListeners();
            eventLog.innerHTML = '<h4>事件触发日志：</h4>';
            logEvent({id: '系统消息'}, `切换到冒泡模式`);
        });

        stopBtn.addEventListener('click', () => {
            stopPropagation = !stopPropagation;
            logEvent({id: '系统消息'}, stopPropagation ? '已启用阻止冒泡' : '已禁用阻止冒泡');
        });

        resetBtn.addEventListener('click', () => {
            eventLog.innerHTML = '<h4>事件触发日志：</h4>';
        });

        // 初始设置为冒泡模式
        setupEventListeners();
        logEvent({id: '系统消息'}, '初始模式: 冒泡');
    </script>
</body>
</html>
